import React from "react";
import { NavLink, Route, Routes, useRoutes } from "react-router-dom";

import Home from "./pages/Home"; // /home
import About from "./pages/About"; // /about
import Help from "./pages/Help"; // /help
import HomeHello from "./pages/HomeHello"; // /home/hello
import HomeWorld from "./pages/HomeWorld"; // /home/world

const links = [
  { id: 1, name: "Home", path: "/home" },
  { id: 2, name: "About", path: "/about" },
  { id: 3, name: "Help", path: "/help" },
];

function App() {
  const element = useRoutes([
    {
      path: "/home",
      element: <Home />,
      children: [
        {
          path: "hello",
          element: <HomeHello />,
        },
        {
          path: "world",
          element: <HomeWorld />,
        },
      ],
    },
    {
      path: "/about",
      element: <About />,
    },
    {
      path: "/help",
      element: <Help />,
    },
  ]);

  console.log("element", element);

  return (
    <div className="app">
      <div className="header">头部</div>
      <div className="main">
        <div className="left">
          <ul>
            {links.map((item) => {
              return (
                <li key={item.id}>
                  <NavLink className="link" to={item.path}>
                    {item.name}
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </div>
        {/* <div className="right">
          <Routes>
            <Route path="/home" element={<Home />}>
              <Route path="hello" element={<HomeHello />}></Route>
              <Route path="world" element={<HomeWorld />}></Route>
            </Route>
            <Route path="/about" element={<About />}></Route>
            <Route path="/help" element={<Help />}></Route>
          </Routes>
        </div> */}

        <div className="right">{element}</div>
      </div>
    </div>
  );
}

export default App;
